<template>
  <a-table
    ref="arud"
    v-model="searchForm"
    v-model:form="form"
    :data="tableData"
    :option="options"
    :total="total"
    :pageSizes="[20, 40]"
    :hasRequest="hasRequest"
    v-model:page="searchFormPage.page"
    v-model:limit="searchFormPage.pageSize"
    @handleSelectionChange="handleSelectionChange"
    @on-load="getTtsList"
    @pagination="getTtsList"
    @onQuery="onQuery"
    @onReset="onReset"
  >
    <template #header-right>
      <el-button type="primary" @click="handleExport">确认导出</el-button>
    </template>
  </a-table>
</template>

<script lang="ts" setup>
import ATable from "@/components/aTable";
const arud = ref();
const searchForm = ref({});
const searchFormPage = ref({
  page: 1,
  pageSize: 4,
});

const form = ref({});
const total = ref(6);
const hasRequest = ref(false);
const tableData = ref([])
const currentTableData = ref([
  {
    id: "1",
    date: "2016-05-03",
    name: "Tom",
    city: "1",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    id: "2",
    date: "2016-05-02",
    name: "Tom",
    city: "2",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    id: "3",
    date: "2016-05-04",
    name: "Tom",
    city: "2",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    id: "4",
    date: "2016-05-01",
    name: "Tom",
    city: "3",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    id: "5",
    date: "2016-05-01",
    name: "Tom",
    city: "3",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    id: "6",
    date: "2016-05-01",
    name: "Tom",
    city: "3",
    address: "No. 189, Grove St, Los Angeles",
  },
]);

const options = computed(() => {
  return {
    stripe: true, // 表格状态
    border: true, // 表格边框
    index: false, // 显隐序号true|false
    indexSort: false, // 切换分页+1页序号true|false
    indexWidth: 70, // 序号宽度
    indexLabel: "序号", // 序号文字
    indexAlign: "left", // 序号位置
    card: false, // 是否开启卡片模式 true | false
    menu: false, // 操作栏显隐 true|false
    menuWidth: "200", // 操作栏宽度设置
    menuAlign: "", // 操作栏位置
    menuLabel: "操作", // 操作栏文字
    menuFixed: false, // 操作栏是否固定 true|false
    header: true, // 头部按钮显隐 true|false
    queryBtn: true, // 查询按钮 true | false
    resetBtn: true, // 重置按钮 true | false
    addBtn: true, // 新增按钮 true|false
    viewBtn: false, // 操作栏查看按钮 true|false
    editBtn: false, // 操作栏编辑按钮 true|false
    delBtn: false, // 操作栏删除按钮 true|false
    cancelBtn: true, // 新增弹窗取消按钮 true | false
    confirmBtn: true, // 新增弹窗确认按钮 true | false
    confirmBtnText: "提交", // 新增弹窗确认按钮更改文字
    // cancelBtnText: '关闭', // 新增弹窗取消按钮更改文字
    // editFormBtnText: '编辑', // 修改弹窗确认按钮 true | false
    selection: true, // 是否多选 true|false
    searchForm: true, // 是否显示搜索组件 true|false
    searchSpan: 6, // 搜索组件单个宽度
    searchLabelWidth: 80, // 调整搜索组件文字宽度
    searchLabelPosition: "left", // 调整搜索组件文字位置 left|top|right
    selectionWidth: 70, // 多选框宽度
    selectionAlign: "center", // 调整多选框位置 left|center|right
    rowKey: 'id',
    reserveSelection: true,
    columns: [
      // {
      //   label: "name",
      //   prop: "name",
      //   hide: false, // 状态为true表格栏隐藏, 默认显示
      //   search: true,
      //   multiple: false, // 开启多选 true|false
      //   disabled: false, // 通用禁用 true|false
      //   readonly: false, // 通用只读 true|false
      //   editDisabled: false, // 修改禁用 true|false
      //   editReadonly: false, // 修改只读 true|false
      //   addDisabled: false, // 新增禁用 true|false
      //   addDeadonly: false, // 新增只读 true|false
      //   searchType: "select", // 指定搜素表单的当前组件的状态
      //   type: "select", // 指定form表单的当前组件的状态
      //   dicData: [
      //     { label: "joon", value: "1" },
      //     { label: "jack", value: "2" },
      //   ],
      //   // [{label: '', value: ''}] 固定的数组示例
      //   placeholder: "请选择",
      //   formSlot: false, // 表单自定义插槽 true|false
      // },
      {
        label: "name",
        prop: "name",
        hide: false, // 状态为true表格栏隐藏, 默认显示
        search: true, // 状态为true开启当前搜索组件，默认隐藏
        // multiple: false, // 开启多选 true|false
        // searchType: "select", // 指定form表单的当前组件的状态
        // type: "select", // 指定form表单的当前组件的状态
        // dicData: [
        //   { label: "joon", value: "1" },
        //   { label: "jack", value: "2" },
        // ],
        // [{label: '', value: ''}] 固定的数组示例
        // placeholder: "请选择",
        align: "center",
      },
      {
        label: "city",
        prop: "city",
        search: true,
        placeholder: "请选择",
        align: "center",
        searchType: "select", // 指定form表单的当前组件的状态
        type: "select", // 指定form表单的当前组件的状态
        dicData: [
          { label: "南京", value: "1" },
          { label: "上海", value: "2" },
          { label: "北京", value: "3" },
          { label: "深圳", value: "4" },
        ],
        // align: 'right', // align: 'right', 支持left/center/right位置更改，默认left
      },
      {
        label: "date",
        prop: "date",
        searchType: "date", // 定义搜索组件的类型
        type: "date", // 定义表单组件的类型
        search: true,
        placeholder: "请选择",
        align: "center",
        // align: 'right', // align: 'right', 支持left/center/right位置更改，默认left
      },
      {
        label: "address",
        prop: "address",
        search: false,
        hide: false, // 状态为true表格栏隐藏, 默认显示
        searchType: "input", // 定义搜索组件的类型
        placeholder: "请输入", // 占位符
        align: "center",
      },
    ],
  };
});

const multipleTableList = ref([]);

// 多选方法
function handleSelectionChange(value) {
  console.log("arud ====", arud.value, value);
  multipleTableList.value = value;
}

function handleExport() {
  console.log("arud ====", arud.value, multipleTableList.value);
  // 清空选中状态
  arud.value.multipleTableRef.clearSelection();
}

// 初始化
function getTtsList() {
  if (searchFormPage.value.page == 1) {
    
    tableData.value = currentTableData.value.slice(0,4)
  } else {
    tableData.value = currentTableData.value.slice(4, 6)
  }
  console.log('tableData.value', tableData.value)
  // xxx()
  //   .then((res) => {})
  //   .catch((err) => {})
  //   .finally(() => {
  //     hasRequest.value = true;
  //   });
}

// 搜索按钮
function onQuery() {
  console.log("searchForm", searchForm.value);
}

// 重置按钮
function onReset() {}
</script>

<style lang="scss" scoped>
:deep(.el-radio__label) {
  display: none;
}
</style>
